//  搜索引擎JS
const inp = document.querySelector('input')
const list = document.querySelector('#list')
//  绑定 input 事件
inp.oninput = function () {
  //  拿到输入的文本内容
  const text = this.value.trim()
  //  发送请求请求数据了  动态创建一个 script 标签
  const script = document.createElement('script')
  // 给 script 标签设置 src 属性
  script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34305,34099,33970,34273,34278,34004,34281,34107,34111,26350,22159&wd=${ text }&req=2&csor=2&cb=fn&_=1627023610785`
  // 把 script 标签插入到 body 里面
  document.body.appendChild(script)
  script.remove()
}
// 把返回的函数定义在全局
function fn(res) {
  if (!res.g) {
    // 说明没有 g 这个数组
    ul.classList.remove('active')
    return
  }
  // 代码执行到这里, 说明有内容需要渲染
  let str = ''
  res.g.forEach(item => {
    str += `<li>${ item.q }</li>`
  })
  // 插入到 ul 内部
  list.innerHTML = str
  // 让 ul 显示
  list.classList.add('active')
}


//  swiper 轮播图功能   banner 图  
var mySwiper = new Swiper ('.swiper-container', {
  loop: true, // 循环模式选项
  effect : "fade", //淡入淡出
   //  无限循环
   loop : true,
   //  自动播放
   autoplay : true,
  // 如果需要分页器
  pagination: {
    el: '.swiper-pagination',
  },
  
  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})        



/*  一级菜单 */
//  获取数据 加 渲染页面
var listBox = document.querySelector('.listBox')

const obj = {
    // type:'pc_index_category',
}
pAjax({
    url: '/yj',
    data:queryStringify(obj),
    dataType:'json'
})  .then(res=>{
  var str = ''
  res.data.category.forEach(function (item) {
    str += `
      <li>
      ${ item.name }
      </li>
    `
  })
  listBox.innerHTML = str
  // console.log(res); 
  })




  // 二级菜单 
  // 不会写  ???????????????????????????
    // const obj = {
    //     type:'pc_index_category',
    //     id:34
    // }
    // pAjax({
    //     url: '/ej',
    //     data:querystringify(obj),
    //     dataType:'json'
    // })
    // .then( res=>{
    //         console.log(res); 
    //         })


// 安全家访
var homeUl = document.querySelector('.homeUl')
var str = ''
homeBox.forEach(function (item) {
  str += `
    <li>
      <img src="${ item.img }" alt="">
      <p>${ item.title }</p>
      <span>${ item.content }</span>
      <div>${ item.number }</div>
    </li>
  `
})
homeUl.innerHTML = str


// 安去路由
// 安全家访
var Secure = document.querySelector('.Secure')
var str = ''
SecureRouting.forEach(function (item) {
  str += `
    <li>
      <img src="${ item.img }" alt="">
      <p>${ item.title }</p>
      <span>${ item.content }</span>
      <div>${ item.number }</div>
    </li>
  `
})
Secure.innerHTML = str
      


// 安全家访
//  行车安全
var SDriving = document.querySelector('.SDriving')
var str = ''
SDrivingSafetyg.forEach(function (item) {
   str += `
     <li>
       <img src="${ item.img }" alt="">
       <p>${ item.title }</p>
       <span>${ item.content }</span>
       <div>${ item.number }</div>
     </li>
   `
 })
 SDriving.innerHTML = str


 
//  扫地机器人
var robot = document.querySelector('.robot')
var str = ''
SweepingRobot.forEach(function (item) {
   str += `
     <li>
       <img src="${ item.img }" alt="">
       <p>${ item.title }</p>
       <span>${ item.content }</span>
       <div>${ item.number }</div>
     </li>
   `
 })
 robot.innerHTML = str



//  智能守护
var Intelligent = document.querySelector('.Intelligent')
var str = ''
IntelligentGuard.forEach(function (item) {
   str += `
     <li>
       <img src="${ item.img }" alt="">
       <p>${ item.title }</p>
       <span>${ item.content }</span>
       <div>${ item.number }</div>
     </li>
   `
 })
 Intelligent.innerHTML = str



//生态互联
var Ecological = document.querySelector('.Ecological')
var str = ''
Ecolog.forEach(function (item) {
   str += `
     <li>
       <img src="${ item.img }" alt="">
       <p>${ item.title }</p>
       <span>${ item.content }</span>
       <div>${ item.number }</div>
     </li>
   `
 })
 Ecological.innerHTML = str



//  更多商品
// 请求数据 渲染页面
//  获取元素 
 var floorBoxUl = document.querySelector('.floor-box-ul')
 var loadingBox = document.querySelector('.loading')

// 准备变量
var page=0
var size=20
var total = Math.ceil(list.length / size)

//  准备一个开关
var flag = true
// 获取数据
var info= {
  callback:'fn',
  q:'*',
  size:20,
  page:0,
  _: new Date().getTime()
}

// 根据 info 的所有内容, 去获取本页的列表数据
getList()
function getList() {
  // 2-1. 把 info 变成 查询字符串 格式
  var data =queryStringify(info)

  const script = document.createElement('script')

  script.src = `https://search.mall.360.cn/search/latest?` + data

  document.body.appendChild(script)

  script.remove()
}

function fn(res) {
  console.log(res)
  var str = ''
  res.data.list.forEach(function (item) {
    str += `
    <li>
    <img src = ${item.img}>
    <div>${item.title}</div>
    <p>¥${item.marketPrice}</p>
    </li>
    `
  })
  floorBoxUl.innerHTML += str
 
}

//  浏览器滚动事件
window.addEventListener('scroll', () => {
  var scroll_top = document.documentElement.scrollTop || document.body.scrollTop
  var window_height = document.documentElement.clientHeight
  var ul_height = floorBoxUl.offsetHeight
  var ul_top = floorBoxUl.offsetTop
  // 4-3. 判断是否加载下一页
  if (scroll_top + window_height <= ul_height + ul_top) return
    // 判断开关
    if (!flag) return
    // 顺手把开关关上
    flag = false
    // 加载下一页
    // 让 loading 效果出现
    loadingBox.classList.add('active')
    // 延迟 1s 加载下一页, 模拟网络加载环境
    setTimeout(function () {
      console.log('加载一页')
      // 4-4. 加载下一页
      info.page++
      getList()
      // 关闭 loading 效果
      loadingBox.classList.remove('active')
      // 可以继续加载下一页了
      flag = true
    }, 1000)
  
})


